<template>
  <div class="container">
    <div style="padding:.15rem">
      <div class="item">
        <h1 class="label">折扣标题</h1>
        <div>
          <yd-input
            class="input"
            :max="20"
            v-model="form.title"
            placeholder="请输入折扣标题"
          />
        </div>
      </div>
      <div class="item">
        <h1 class="label">折扣内容</h1>
        <div>
          <yd-input
            class="input"
            :max="50"
            v-model="form.content"
            placeholder="请输入折扣内容"
          />
        </div>
      </div>
      <div class="item">
        <h1 class="label">折扣数量</h1>
        <div>
          <yd-input
            class="input"
            type="number"
            :max="10"
            v-model="form.number"
            placeholder="请输入折扣数量"
          />
        </div>
      </div>
      <div class="item">
        <h1 class="label">折扣库存</h1>
        <div>
          <yd-input
            class="input"
            type="number"
            :max="10"
            v-model="form.inventory"
            placeholder="请输入折扣库存"
          />
        </div>
      </div>
      <div class="item">
        <h1 class="label">用户等级</h1>
        <div>
          <yd-input
            class="input"
            type="number"
            :max="10"
            v-model="form.level"
            placeholder="请输入用户等级"
          />
        </div>
      </div>
      <div class="item">
        <h1 class="label">是否启用</h1>
        <div>
          <select
            style="width:100%;border:none;border-bottom:1px solid #ddd!important;height:1rem;padding-left:.15rem"
            v-model="form.open"
          >
            <option value="1">启用</option>
            <option value="2">禁用</option>
          </select>
        </div>
      </div>
      <yd-button size="large" type="primary" @click.native="save" class="btn">
        保 存
      </yd-button>
    </div>
  </div>
</template>
<script>
import { discountGoodsAdd, discountGoodsUpdate, getDiscountGoods } from '@/api';
export default {
  name: 'cutDetail',
  data() {
    return {
      form: {
        open: 1,
        content: '',
        inventory: '',
        number: '',
        title: '',
        level: ''
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    if (!this.isAdd) this.getData();
  },
  computed: {
    isAdd() {
      return this.$route.query.type === 'add';
    }
  },
  methods: {
    getData() {
      getDiscountGoods({
        ...this.pageParams,
        request: {
          bussinesId: 1,
          id: this.$route.query.id
        }
      }).then(res => {
        this.form = res.data.result[0];
      });
    },
    save() {
      const { open, content, inventory, number, title, level } = this.form;
      const hasError = (() => {
        switch (true) {
          case !title:
            return '请输入折扣标题';
          case !content:
            return '请输入折扣内容';
          case !inventory || inventory <= 0:
            return '请输入正确的折扣库存';
          case !number || number <= 0:
            return '请输入正确的折扣数量';
          case !level || level <= 0:
            return '请输入正确的用户等级';

          default:
            return false;
        }
      })();
      if (hasError === false) {
        if (this.isAdd) {
          discountGoodsAdd(this.form)
            .then(res => {
              if (res.success) {
                this.$dialog.toast({
                  mes: '添加成功',
                  type: 'success',
                  timeout: 800
                });
                this.$router.back();
              }
            })
            .catch(e => {
              console.log(e);
            });
        } else {
          discountGoodsUpdate(this.form)
            .then(res => {
              if (res.success) {
                this.$dialog.toast({
                  mes: '修改成功',
                  type: 'success',
                  timeout: 800
                });
                this.$router.back();
              }
            })
            .catch(e => {
              console.log(e);
            });
        }
      } else {
        this.$dialog.toast({
          mes: hasError,
          type: 'error',
          timeout: 800
        });
      }
    }
  }
};
</script>
<style scoped lang="less">
.container {
  // height: 100%;
  text-align: left;
  // display: flex;
  // flex-direction: column;
  background: #f6f6f6;
}
.upload-headimg {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #eaeaea;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 0.2rem;
  position: relative;
  overflow: hidden;

  #headImg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .uploadHeadImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
.label {
  font-size: 0.3rem;
  font-weight: 500;
}

.item {
  margin: 0.15rem 0 0.3rem;
}

.upload-photo {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px dotted #ccc;
  border-radius: 0.15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;

  input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

.time-picker {
  display: flex;
  margin: 0.3rem 0;
  flex-direction: column;

  & > div {
    display: flex;
    width: 50%;
    white-space: nowrap;
    align-items: center;
  }

  .time {
    font-size: 0.4rem;
  }
}

.photos {
  display: flex;
  flex-wrap: wrap;

  img {
    width: 32%;
    max-height: 2rem;
    margin: 0.65%;
  }
}

/deep/.input {
  border-bottom: 1px solid #ddd;
  height: 0.8rem;
  margin: 0.1rem 0;
  padding: 0 0.15rem;

  input {
    color: #333;
    letter-spacing: 0.5px;
  }
}
.avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.05rem solid #fff;
  margin-right: 0.3rem;
}

.userInfo {
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 0.34rem;
}

.line {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 0.2rem 0;
}

.box {
  background-color: #eee;
  border-radius: 0.05rem;
  padding: 0.5rem;
}
</style>
